<template>
  <span>
    <small class="dis-ib align-cm" @click="openDrawer">
      <div>登录次数</div>
      <u class="text-blue">{{ loginCount }}</u>
    </small>
    <el-drawer
      title="登录记录"
      :visible.sync="drawer"
      direction="ltr"
      :append-to-body="true"
      :before-close="handleClose"
      :size=600
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="addTime" label="登录时间" width="150">
          <template slot-scope="scope">
            <span>{{ $moment(scope.row.addTime).format('YYYY-M-D') }}</span>
            <br>
            <span>{{ $moment(scope.row.addTime).format('HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP" width="150"></el-table-column>
        <el-table-column prop="systemVersion" label="客户端系统" width="150"></el-table-column>
        <el-table-column prop="appVersion" label="客户端版本号" width="150"></el-table-column>
      </el-table>
      <div class="dis-flex flex-cm mt20">
        <el-pagination
          @current-change="getData"
          :pager-count="pagerCount"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="loginCount">
        </el-pagination>
      </div>
      <div v-if="isDev">
        {{ loginCount }},{{ uidKey }} : {{ uidValue }} ;
      </div>
    </el-drawer>
  </span>
</template>

<script>
export default {
  props:{
    loginCount:{
      type:Number,
      default:function(){return 0;}
    },
    uidKey:{
      type:String,
      default:function(){return 'userId';}
    },
    uidValue:{
      type:Number,
      default:function(){return 0;}
    },
    apiName:{
      type:String,
      default:function(){return '';}
    },
    
  },
  data(){
    return {
      isDev:process.env.NODE_ENV == 'development',
      drawer:false,
      tableData:[],
      pagerCount:5,
      pageIndex:1,
      pageSize:10,
    }
  },
  
  methods:{
    test(){
      console.log('test')
    },
    openDrawer(){
      this.drawer = !this.drawer;
      this.pageIndex = 1;
      this.getData()
    },
    handleClose(){
      this.drawer = !this.drawer;
    },
    getData(){
      let parnms = {
        pageSize:this.pageSize,
        pageIndex:this.pageIndex,
      }
      parnms[this.uidKey] = this.uidValue
      this.$api[this.apiName](parnms).then((res)=>{
        if(res.data.code == 200){
          this.formatData(res.data.data)
        }
      })
    },
    formatData(data){
      this.tableData.splice(0,this.tableData.length)
      if(_.isArray(data.userLoginInfos) && data.userLoginInfos.length>0){
        data.userLoginInfos.forEach((e)=>{
          this.tableData.push({
            addTime:        e.addTime,
            ip:             e.ip,
            systemVersion:  e.systemVersion,
            appVersion:     e.appVersion,
            remark:         e.remark,
            users_Id:       e.users_Id,
          })
        })
      }
    },
  },
  mounted(){},
}
</script>

<style lang="less" scoped>
.mt20{margin-top:20px;}
.text-blue{color:#91bef0}
</style>